<template>
    <div class="breadcrumb">
        <el-breadcrumb separator="/">
            <el-breadcrumb-item v-for="(bread, index) in bread" :key="index" :to="breadcrumbPath(bread)">{{ bread.title
            }}</el-breadcrumb-item>
        </el-breadcrumb>
    </div>
</template>
<script>
import { getCodeById } from '@/utils/routeUtils.js'
export default {
    name: "myBreadCrumb",
    data() {
        return {
            bread: [
                {
                    title: "首页",
                    path: "/"
                }
            ]
        };
    },
    methods: {
        getBreadData() {
            const meatched = this.$route.matched;
            console.log('getBreadData', this.$route.matched)
            const filterArr = meatched.filter(item => {
                return item.meta && item.meta.title;
            });
            let keys = {}
            const newBread = filterArr.map(item => {
                if (!keys[item.meta.title]) {
                    keys[item.meta.title] = true
                    return {
                        title: item.meta.title,
                        query: item.query,
                        path: item.path
                    };
                }
            })
            let tbread = []
            newBread.forEach((e, index) => {
                // FIXD: 因为目前党校介绍只有一级，所以去掉简介目录
                if (e && e.path != '/group') {
                    if (index == newBread.length - 1) {
                        e.path = this.$route.fullPath
                    }
                    console.log('breadcrumbPath', e)
                    tbread.push(e)
                }
            })
            this.bread = [{ path: '/', title: '首页' }, ...tbread];
        },
        breadcrumbPath(item) {
            let path = item.path
            return path
        }
    },
    created() {
        // 面包屑功能实现
        // 1.路由模块化整理成一二级路由
        // 2.每级路由配置路由源信息
        // 3.在面包屑组件获取路由源信息中的meta数据，在matched中可以获取到各级meta信息
        // 4.过滤matched中的meta，过滤掉空的meta
        // 5.循环出我们需要的数据格式
        // 6.过滤好的数据格式赋值给data里面的bread
        // 7.监听路由，路由改变就重新给bread赋值
        this.getBreadData()
    },
    watch: {
        "$route.path": function () {
            this.getBreadData()
        }
    }
};
</script>
  
<style lang="scss" scoped>
@media (max-width: 576px) {
    .el-breadcrumb {
        font-size: 16px !important;
        line-height: 3;
    }
}

.breadcrumb {
    background-color: white;
    padding: 0;
    margin: 0;
}

.el-breadcrumb {
    font-size: 20px;
    line-height: 3;
}
</style>
  